import { DeleteModal } from '@/components/Modals';
import api from '@/pages/Goods/ListManagement/request';
import { createFilterColumns, createTableRequestParams } from '@/utils/table';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, message, Space, Typography } from 'antd';
import { useMemo, useRef, useState } from 'react';
import Form from './Form';
import GoodsListSelledShopForm from './SelledShopForm';
function UserManagement() {
  const actionRef = useRef<ActionType>();

  const [isShowDrawerForm, setIsShowDrawerForm] = useState(false);
  const [isShowModal, setIsShowModal] = useState(false);
  const [isShowUnselledModal, setIsShowUnselledModal] = useState(false);
  const [curData, setCurData] = useState<Partial<GoodsListManagementApi.ListResponse>>({});
  const [filterList, setFilterList] = useState<Requestor.FilterResponse[]>([]);

  // request
  const getFilterList = async () => {
    const filterList = await api.getFilterList();
    setFilterList(filterList);
    return filterList;
  };
  const getListRequest = (
    params: Requestor.TableParams,
    filterList: Requestor.FilterResponse[],
  ) => {
    const requestParams = createTableRequestParams(params, filterList);
    return api.getList({ ...requestParams });
  };
  const getList = async (params: Requestor.TableParams) => {
    if (!filterList || !filterList.length) {
      const filterList = await getFilterList();
      return getListRequest(params, filterList);
    } else {
      return getListRequest(params, filterList);
    }
  };

  // method
  const setState = (
    state: boolean,
    setState: React.Dispatch<React.SetStateAction<boolean>>,
    data?: GoodsListManagementApi.ListResponse,
  ) => {
    setCurData(data || {});
    setState(state);
  };
  const removeRequest = async (params: GoodsListManagementApi.DeleteParams) => {
    const data = await api.remove(params);
    if (data.success) {
      actionRef.current?.reload();
      setState(false, setIsShowModal);
    }
  };
  const updateOffSelled = async (params: GoodsListManagementApi.OffSelledParams) => {
    const data = await api.updateOffSelled(params);
    if (data.success) {
      actionRef.current?.reload();
      setState(false, setIsShowUnselledModal);
    }
  };
  const onConfirmRemove = () => {
    const { goodsId = '' } = curData;
    removeRequest([goodsId]);
  };
  const onCancelRemove = () => {
    setState(false, setIsShowModal);
  };

  const onConfirmUnselled = () => {
    const { goodsId = '' } = curData;
    updateOffSelled({ goodsId: [goodsId] });
  };
  const onCancelUnselled = () => {
    setState(false, setIsShowUnselledModal);
  };

  const columns = useMemo(() => {
    const filterColumns = createFilterColumns<GoodsListManagementApi.ListResponse>(filterList);
    const tableColumns: ProColumns<GoodsListManagementApi.ListResponse>[] = [
      {
        title: '商品名称',
        dataIndex: 'goodsName',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
      },
      {
        title: '商品类型',
        dataIndex: 'goodsCategoryName',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
      },
      {
        title: '商品分类',
        dataIndex: 'goodsClassifyName',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
      },
      {
        title: '划线价',
        dataIndex: 'exhibitionPrice',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
      },
      {
        title: '销售价格',
        dataIndex: 'sellPrice',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
      },
      {
        title: '推荐',
        dataIndex: 'isRecommend',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
        render(_, record) {
          return record.isRecommend ? '是' : '否';
        },
      },
      {
        title: '上架/销售',
        dataIndex: 'isSelled',
        hideInSearch: true,
        ellipsis: true,
        align: 'center',
        render(_, record) {
          return record.isSelled ? '是' : '否';
        },
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
      },
      {
        title: '操作',
        hideInSearch: true,
        align: 'center',
        width: '25%',
        render(_, record) {
          return (
            <Space>
              <Typography.Link>
                <GoodsListSelledShopForm
                  data={record}
                  onSuccess={() => actionRef.current?.reload()}
                />
              </Typography.Link>
              <Typography.Link>
                <Button
                  danger
                  type="link"
                  onClick={() => setState(true, setIsShowUnselledModal, record)}
                >
                  下架
                </Button>
              </Typography.Link>
              <Typography.Link>
                <Button
                  type="link"
                  onClick={() => {
                    if (record.isSelled) return message.error('请下架商品后再修改');
                    setState(true, setIsShowDrawerForm, record);
                  }}
                >
                  编辑
                </Button>
              </Typography.Link>
              <Typography.Link>
                <Button danger type="link" onClick={() => setState(true, setIsShowModal, record)}>
                  删除
                </Button>
              </Typography.Link>
            </Space>
          );
        },
      },
    ];
    return filterColumns.concat(tableColumns);
  }, [filterList]);
  return (
    <PageContainer>
      <ProTable
        bordered
        size="small"
        rowKey="goodsId"
        options={false}
        actionRef={actionRef}
        pagination={{ defaultPageSize: 10, showSizeChanger: true }}
        toolBarRender={() => [
          <Button key="add" type="primary" onClick={() => setState(true, setIsShowDrawerForm)}>
            添加
          </Button>,
        ]}
        columns={columns}
        request={getList}
      />
      <Form
        isEdit={!!curData.goodsId}
        visible={isShowDrawerForm}
        data={curData}
        onChangeVisible={setIsShowDrawerForm}
        onSuccess={() => actionRef.current?.reload()}
      />

      <DeleteModal
        open={isShowModal}
        content="确认删除吗？"
        onOk={onConfirmRemove}
        onCancel={onCancelRemove}
      />
      <DeleteModal
        open={isShowUnselledModal}
        content="确认下架商品吗？"
        onOk={onConfirmUnselled}
        onCancel={onCancelUnselled}
      />
    </PageContainer>
  );
}

export default UserManagement;
